<template>
  <div class="pdf-pic" id="pdfPic">
    <div class="page">
      <div class="report-edit">
        <div class="report-edit-content">
          <div class="top-card">
            <div class="top-card-title">电梯故障维修报告</div>
            <div class="top-card-content">
              <div>尊敬的客户：</div>
              <div>
                您好！以下是关于本次电梯故障的维修报告，我们力求以最简单明了的方式，让您了解故障的全貌及我们的处理过程。
              </div>
            </div>
            <!-- <div class="top-card-pic">
              <image
                src="./static/report_pic.png"
                mode="widthFix"
                style="width: 176rpx"
              ></image>
            </div> -->
          </div>
          <div class="report-card">
            <div class="report-card-title">
              <div class="text">电梯基本信息</div>
            </div>
            <div class="report-user-row">
              <div class="row">
                <div class="title">电梯名称</div>
                <div class="content" style="padding-right: 10px;">
                  {{ info.elevatorAddress }}/{{ info.buildingName }}
                </div>
              </div>
              <div class="row">
                <div class="title">电梯品牌</div>
                <div class="content" style="padding-right: 10px;">{{ info.brandName }}</div>
              </div>
              <div class="row">
                <div class="title">额定载重</div>
                <div class="content">{{ info.supportingPower }}kg</div>
              </div>
              <div class="row">
                <div class="title">额定速度</div>
                <div class="content">{{ info.speed }}m/s</div>
              </div>
            </div>
          </div>
          <!-- <div class="report-card top-card-column">
            <div class="report-card-title">
              <div class="text">电梯基本信息</div>
            </div>
            <div class="top-card-column-item">
              <div class="title">电梯名称</div>
              <div class="content">
                {{ info.elevatorAddress }}/{{ info.buildingName }}
              </div>
            </div>
            <div class="top-card-column-item">
              <div class="title">电梯品牌</div>
              <div class="content">{{ info.brandName }}</div>
            </div>
            <div class="top-card-column-item">
              <div class="title">额定载重</div>
              <div class="content">{{ info.supportingPower }}</div>
            </div>
            <div class="top-card-column-item">
              <div class="title">额定速度</div>
              <div class="content">{{ info.speed }}m/s</div>
            </div>
          </div> -->
          <div class="report-card">
            <div class="report-card-title">
              <div class="text">故障现象与原因</div>
            </div>
            <div class="row">
              <div class="title" style="color: #333">报障时间</div>
              <div class="content" style="padding-top: 2px;">{{ info.planCreateTime }}</div>
            </div>
            <div
              class="part-card"
              v-for="(item, i) in info.reasonList"
              :key="i"
            >
              <div class="part-card-title">
                <div class="serial-text">{{ i + 1 }}.</div>
                <div class="content">
                  {{ item.partsNames | replaceAmpersand }}
                  <span v-if="item.floorStandNames">({{ item.floorStandNames.replaceAll(',','>') }})</span>
                </div>
              </div>
              <div class="part-card-content">
                <div class="row">
                  <div class="title">现象</div>
                  <div class="content">{{ item.mfDesc }}</div>
                </div>
                <div class="row">
                  <div class="title">原因</div>
                  <div class="content">{{ item.faultReason }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="report-card">
            <div class="report-card-title">
              <div class="text">故障处理方案</div>
            </div>
            <div
              class="part-card"
              v-for="(item, i) in info.projectList"
              :key="i"
            >
              <div class="part-card-title">
                <div class="serial-text">{{ i + 1 }}.</div>
                <div class="content">
                  {{ item.partsNames | replaceAmpersand }}
                  <span v-if="item.floorStandNames">({{ item.floorStandNames.replaceAll(',','>') }})</span>
                </div>
              </div>
              <div class="part-card-content">
                <div class="row">
                  <div class="title">处理方案</div>
                  <div class="content">
                    {{ item.faultDesc }}
                  </div>
                </div>
                <div class="row">
                  <div class="title">配件更换</div>
                  <div class="content">{{ item.partsOpeText }}</div>
                </div>
                <div class="row" style="padding-top: 8px">
                  <div class="title">处理前图片</div>
                  <div class="content">
                    <template v-for="(img, j) in item.mfImgUrl">
                      <img
                        v-if="img.type === 'image'"
                        :key="j"
                        class="report-img"
                        mode="widthFix"
                        crossorigin="anonymous"
                        :src="`${img.url}?44${Date.now()}_${i}_${j}`"
                        alt=""
                      />
                    </template>
                  </div>
                </div>
                <div class="row">
                  <div class="title">处理后图片</div>
                  <div class="content">
                    <template v-for="(img, j) in item.faultImg">
                      <img
                        v-if="img.type === 'image'"
                        :key="j"
                        class="report-img"
                        mode="widthFix"
                        crossorigin="anonymous"
                        :src="`${img.url}?55${Date.now() + j}`"
                        alt=""
                      />
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="report-card">
            <div class="report-card-title">
              <div class="text">维保人员</div>
            </div>
            <div class="report-user-row">
              <div class="row">
                <div class="title">姓名</div>
                <div class="content">{{ info.planUserName }}</div>
              </div>
              <div class="row">
                <div class="title">报告日期</div>
                <div class="content" style="padding-top: 2px;">{{ info.createTime }}</div>
              </div>
            </div>
          </div>
          <div class="report-edit-info">
            感谢贵方选择使用我司提供的产品和服务，我们将持续提供专业、高效的服务，确保您的电梯运行无忧。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	name: 'ReportDetailPDF',
	components: {},
	props: {
		domId: {
			type: String,
			default: 'reportPdfPic',
		},
		info: {
			type: Object,
			default: null,
		},
	},
	filters: {
		replaceAmpersand(value) {
			if (!value) return '';
			return value.replace(/&amp;&amp;/g, '>');
		},
	},
	data() {
		return {};
	},
	onLoad() {},
	methods: {},
};
</script>

<style lang="scss" scoped>
// @font-face {
//     font-family: '思源黑体 Regular';
//     src: url('https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1722408210269_ww0akfjk.otf');
// }
/* 页面尺寸和边距 */
.title {
  margin-bottom: 0px;
}
.pdf-pic {
  margin: 0;
  width: 210mm;
  min-width: 210mm;
  //   height: 297mm;
  font-family: '思源黑体 Regular', Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  /* 页面内边距 */
  .page {
    // padding: 10mm;
    box-sizing: border-box;
    div {
      box-sizing: border-box;
      font-size: 12px;
      font-family: '思源黑体 Regular', Helvetica, 'Microsoft YaHei', Arial, sans-serif;
    }
    .report-edit {
      .report-edit-msg-box {
        height: 56px; // 112rpx / 2
        width: 100%;
      }
      &-msg {
        width: 100%;
        height: 56px; // 112rpx / 2
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        padding: 0 20px;
        background: #fffadf;
        .content {
          word-break: break-all;
          flex: 1;
          width: 0;
          padding: 0 20px;
          font-size: 14px; // 28rpx / 2
          color: #ff7505;
          font-size: 13px;
          line-height: 18px; // 36rpx / 2
        }
        .close {
          margin-left: 30px;
        }
      }
      &-content {
        padding: 20px;
        background-color: #e2f3ff;
        .top-card {
          background-color: #fff;
          padding: 20px; // 40rpx / 2
          border-radius: 4px; // 8rpx / 2
          position: relative;
          margin-bottom: 8px; // 8px / 2
          // &::before,
          // &::after {
          //   content: "";
          //   position: absolute;
          //   width: 10px; // 20rpx / 2
          //   height: 10px;
          //   border-radius: 50%; // 创建圆形
          //   background-color: #e2f3ff;
          // }

          // &::before {
          //   left: -5px; // -10rpx / 2
          //   top: 55px; // 110rpx / 2
          // }

          // &::after {
          //   right: -5px; // -10rpx / 2
          //   top: 55px; // 110rpx / 2
          // }
          &-title {
            color: #1b2057;
            font-weight: bold;
            font-size: 22px; // 44rpx / 2
            margin-bottom: 18px; // 36rpx / 2
          }
          &-comma {
            margin-left: -20px; // -40rpx / 2
          }
          &-content {
            position: relative;
            font-size: 14px; // 28rpx / 2
            text-align: left;
            color: #333333;
            line-height: 20px; // 40rpx / 2
            z-index: 2;
          }
          &-pic {
            position: absolute;
            left: 210px; // 420rpx / 2
            top: 8px; // 8px / 2
          }
          &-column {
            display: flex;
            flex-wrap: wrap;
            padding-top: 32px; // 64rpx / 2
            margin: -9px 0; // -18rpx / 2
            &-item {
              flex: 0 0 50%;
              width: 0;
              display: flex;
              padding: 9px 0; // 18rpx / 2
              & > .title {
                margin-right: 16px; // 32rpx / 2
                white-space: nowrap;
                color: #999999;
              }
            }
          }
        }
        .report-card {
          background-color: #ffffff;
          border-radius: 4px; // 8px / 1
          padding: 16px 10px; // 32rpx 20rpx / 2
          margin-bottom: 8px; // 8px / 2
          &-title {
            font-size: 16px; // 32rpx / 2
            font-weight: 700;
            text-align: left;
            color: #333333;
            margin-bottom: 8px; // 8rpx / 2
            position: relative;
            .text {
              position: relative;
              z-index: 2;
              font-size: 14px;
            }
            &::before {
              content: ""; // 必须要有内容，即使为空字符串
              position: absolute;
              left: -1px; // -2rpx / 2
              top: -3px; // -6rpx / 2
              z-index: 1;
              //   transform: translateY(-50%);
              width: 16px; // 32rpx / 2
              height: 16px; // 32rpx / 2
              background-image: url(""); // 图片路径
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
            }
          }
          .row {
            display: flex;
            margin-bottom: 12px; // 24rpx / 2
            font-size: 14px; // 28rpx / 2
            .title {
              padding-right: 16px;
              white-space: nowrap;
              color: #999999;
              // flex: 0 0 70px; // 70px / 2
              // width: 0;
            }
            .content {
              word-break: break-all;
              flex: 1;
              width: 0;
              color: #333333;
              display: flex;
              // align-items: flex-start;
              align-items: center;
              flex-wrap: wrap;
              .report-img {
                width: 0;
                flex: 0 0 calc(50% - 10px); // (50% - 20rpx) / 2
                margin-bottom: 8px; // 8px / 2
                height: auto;
                object-fit: cover;
              }
              & > .report-img:nth-child(odd) {
                margin-right: 5px; // 10rpx / 2
              }
              & > .report-img:nth-child(even) {
                margin-left: 5px; // 10rpx / 2
              }
            }
          }
          .column {
            display: flex;
            flex-direction: column;
            // margin-bottom: 24rpx;
            .title {
              color: #999999;
              margin-bottom: 8px; // 8px / 2
            }
            .content {
              word-break: break-all;
              .report-img {
                width: 100%;
                margin-bottom: 8px; // 8px / 2
                height: auto;
                object-fit: cover;
              }
            }
          }
          & > .row:nth-last-child(1),
          & > .column:nth-last-child(1) {
            margin-bottom: 0;
          }
          .part-card {
            &-title {
              display: flex;
              margin-bottom: 6px; // 12rpx / 2
              margin-top: 8px; // 36rpx / 2
              align-items: center;
              .serial-num {
                margin-right: 8px; // 8px / 2
              }
              .serial-text {
                margin-right: 8px; // 8px / 2
              }
              &>.content{
                word-break: break-all;
                flex: 1;
                width: 0;
              }
            }
            &-content {
              // background-color: #f3f6f8;
              border-radius: 8px; // 8px / 2
              // padding: 0 20rpx;
              & > .row {
                padding: 6px 0; // 12rpx / 2
                margin-bottom: 0;
                // border-bottom: 1px dashed #cccccc;
                .title {
                  // flex: 0 0 46px; // 92rpx / 2
                  padding-right: 16px; // 20rpx / 2
                  box-sizing: border-box;
                  text-align: left;
                  white-space: nowrap;
                }
              }
              & > .row:nth-last-child(1) {
                border-bottom: none;
              }
            }
          }
          .report-user-row {
            display: flex;
            flex-wrap: wrap;
            .row {
              flex: 0 0 50%;
              width: 0;
            }
            & > .row:nth-last-child(1),
            & > .row:nth-last-child(2) {
              margin-bottom: 0;
            }
          }
        }
      }
      &-info {
        color: #999999;
        font-size: 12px; // 24rpx / 2
        line-height: 17px; // 34rpx / 2
        text-align: left;
        width: 100%;
        padding: 8px 10px; // 8px / 2, 20rpx / 2
      }
      &-footer {
        width: 100%;
        height: 50px; // 100rpx / 2
        .btn-box {
          height: 50px; // 100rpx / 2
          width: 100%;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 3;
          padding: 8px; // 8px / 2
          box-sizing: border-box;
          background-color: #ffffff;
          .btn {
            width: 100%;
            height: 100%;
            background-color: #0091ff;
            border-radius: 4px; // 8rpx / 2
            color: #ffffff;
            font-size: 14px; // 28rpx / 2
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            &-disabled {
              background-color: #cccccc;
              color: #ffffff;
            }
          }
        }
      }
    }
    .icon-close {
      display: inline-block;
      width: 12px; // 24rpx / 2
      height: 12px;
      position: relative;
      cursor: pointer;
      color: #333;

      &::before,
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: currentColor;
        width: 1px; // 2rpx / 2
        height: 100%;
        transform-origin: center;
        transition: transform 0.2s ease-in-out;
      }

      &::before {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      &:hover &::before,
      &:hover &::after {
        transform: translate(-50%, -50%) scale(1.2) rotate(45deg);
      }
    }
    image {
      height: auto;
    }
    .serial-num {
      width: 20px; // 40rpx / 2
      line-height: 20px; // 40rpx / 2
      height: 20px;
      text-align: center;
      background: #dcf0ff;
      border-radius: 2px; // 4rpx / 2
      font-size: 12px; // 24rpx / 2
      color: #0091ff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .textarea-box {
      border: 1px solid #e9e9e9; // 2rpx / 2
      padding: 10px; // 20rpx / 2

      background-color: #ffffff;
      .length {
        text-align: right;
        // padding-bottom: 20rpx;
        color: #999999;
      }
    }
    .select-box {
      display: flex;
      flex-wrap: wrap;
      .select {
        flex: 0 0 calc(33.333% - 5px); // (33.333% - 10rpx) / 2
        width: 0;
        border: 1px solid #cccccc; // 2rpx / 2
        padding: 2px 10px; // 4rpx / 2, 20rpx / 2
        box-sizing: border-box;
        color: #666666;
        margin-right: 5px; // 10rpx / 2
        margin-bottom: 10px; // 20rpx / 2
        border-radius: 4px; // 8rpx / 2
        text-align: center;
        white-space: nowrap;
      }
      .selected {
        border-color: #0091ff;
        color: #0091ff;
      }
    }
  }
}

/* 打印样式 */
@media print {
  body {
    /* 重置打印样式，移除不必要的元素 */
  }
}
</style>